 <template>
    <div class="app-container home">
      <input class="search" v-on:input="sear" v-model="keyword"/>
      <ul v-if="searchResults.length">
        <li v-for="result in searchResults" :key="result.uid" @click="selectResult(result)">{{ result.title }}</li>
      </ul>
      <baidu-map :center="center"  :map-click="false" :zoom="zoom"  @ready="handler" :scroll-wheel-zoom="croll_wheel_zoom" class="bm-view">
          <bm-view style="width: 100%; height:600px; flex: 1"></bm-view>
          <bm-marker :position="center" @dragend="dragends" :dragging="true">
         </bm-marker>
          <bm-info-window :position="center" :show="true" :offset="{width: 0, height: -25}">
            <p>{{ content }}</p>
          </bm-info-window>
      </baidu-map>

    </div>
  </template>
  
  <script>
  export default { 
    name: 'MyComponent',
    props: {
      
    },
    watch: {
      showMap() {
        this.center = ''
        this.initMaker()
      },
    },
    data() {
      return {
        // 版本号
        version: "3.8.5",
        center: {lng: 0, lat: 0},
        zoom: 0,
        croll_wheel_zoom: true,
        location: '郑州',
        keyword: '',
        searchResults: [],
        map: null,
        BMap:null,
        content:'河南省郑州市二七区京广路,火车站'
    };
    },
    created(){
    },
    methods: {
      sear(){
        var ls  = new this.BMap.LocalSearch('郑州市')
        let that = this
        ls.search(this.keyword)
        ls.setSearchCompleteCallback(function(res){
          if(ls.getStatus() == BMAP_STATUS_SUCCESS){
            that.searchResults = res.Yr
          }
        })
      },
      dragends(e){
          this.center = e.point
          this.$emit('latAndLngValue',e.point)
          this.getLocations(e.point)
      },
      getLocations(point){
          const that = this
          var myGeo = new BMap.Geocoder();
          myGeo.getLocation(point,function(res){
            that.content = res.address + res.business
          })
      },
      handler ({BMap, map}) {
        this.center.lng = 113.663920
        this.center.lat = 34.749027
        this.zoom = 15
        this.map = map
        this.BMap = BMap
      },
      selectResult(result) {
        this.searchKeyword = result.title;
        this.center = result.point
        this.content = result.address
        this.searchResults = []; // 选择结果后清空搜索结果列表
      },
    }
  };
  </script>
  
  <style scoped lang="scss">
  .home {
    padding: 0;
    height: 50%;
  }
  .bm-view{
      width: 100%;
      height: 50%;
    }
    ul li {
      list-style: none;
      
    }
    ul {
      position: absolute;
      z-index: 9999;
      background:white;
      margin: 0;
      padding: 0;
      border: 1px solid #e9e9e9;

    }
    li {
      border-top: 1px solid #c9c9c9;
      height: 45px;
      line-height: 45px;
      margin: 0;
      padding-left: 10px;
      min-width: 200px;
    }
    li:hover {
      background-color: #eeeeee;
    } 
    .search{
      height: 45px;
      width: 400px;
      outline: none;
      border: 1px solid #eeeeee;
      font-size: 18px;
      font-weight: 100;
    }
  </style>
  
  